<template>
  <div class="app-container">
    <div>
      <el-button
        type="success"
        style="float:right;margin-right:50px;border-radius:20px"
        @click="onQuiz"
      >我要提问</el-button>
      <div style="font-size:18px">插件问答</div>
    </div>
    <div
      v-for="problem in query.data"
      :key="problem.problemId"
      class="app-content"
      @click="onToAppReply(problem.problemId)"
    >
      <img
        :src="problem.authorPhotoUrl? '/dev-api/attachment/down/'+problem.authorPhotoUrl:defaultAvatar"
        class="avatar"
      />
      <div class="title-content">{{problem.problemTitle}}</div>
      <div class="time-content">{{problem.createTime | date("yyyy-MM-dd")}}</div>
      <div class="describe-content" v-html="problem.problemDescribe"></div>
    </div>
    <vxe-pager
      v-if="(query || {}).recordsTotal > 0"
      :current-page="query.startIndex"
      :page-size="query.pageSize"
      :total="query.recordsTotal"
      @page-change="onPageChange"
      :pageSizes="[5, 10, 20, 50, 100]"
    ></vxe-pager>
    <vxe-modal
      v-model="quizModalVisible"
      :showFooter="true"
      show-zoom
      destroy-on-close
      :resize="true"
      :loading="quizLoading"
      title="我要提问"
      width="550"
    >
      <el-form ref="quizFormRef" :rules="quizRules" :model="problemModel">
        <el-row>
          <el-col :span="24">
            <el-form-item label="问题标题：" prop="problemTitle">
              <el-input v-model="problemModel.problemTitle"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="问题描述：" >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item  prop="problemDescribe">
              <editor v-model="problemModel.problemDescribe" :min-height="192" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onSaveQuiz" icon="el-icon-circle-check">保 存</el-button>
        <el-button @click="quizModalVisible = false" icon="el-icon-circle-close">关 闭</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import Editor from "@/components/Editor";
import request from "@/utils/request";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/eip/marketAppProblem/getListModel",
      query: "/eip/marketAppProblem/query"
    };
  }

  onBeforeQuery(type, conditions, params) {
    if (type === "list") {
      // this.$util.extend(params.query, { appId: this.vm.appId });
      params.query.appId = this.vm.$route.query.appId;
    }
  }

  onAfterGetEntity(res) {
    const { pageAction, models } = res;
    if (pageAction === "create") {
      (models.model || {}).appId = this.vm.appId;
    }
  }

  mixin() {
    return {
      props: {
        appId: String
      },
      components: {
        Editor
      },
      data() {
        return {
          defaultAvatar: require("@/assets/images/profile.png"),
          quizLoading: false,
          quizModalVisible: false,
          quizRules: {
            problemTitle: [
              {
                required: true,
                message: "标题不能为空",
                trigger: "blur"
              }
            ],
            problemDescribe: [
              {
                required: true,
                message: "问题描述不能为空",
                trigger: "blur"
              }
            ]
          },
          problemModel: {}
        };
      },
      methods: {
        onQuiz() {
          this.quizModalVisible = true;
          this.quizLoading = true;
          this.getEntity(undefined, this.urls.entity)
            .then(res => {
              const { model } = res.models || {};
              this.problemModel = model;
              this.problemModel.appId = this.appId;
            })
            .catch(e => {
              this.msgError(e || "请求数据失败，请稍后再试");
            })
            .finally(() => {
              this.quizLoading = false;
            });
        },
        onSaveQuiz() {
          this.$refs["quizFormRef"].validate(valid => {
            if (valid) {
              this.quizLoading = true;
              const addParams = {
                model: this.problemModel,
                pageAction: "create"
              };
              request({
                url: this.urls.save,
                method: "post",
                data: addParams
              })
                .then(res => {
                  const { success, message } = res;
                  if (success) {
                    this.msgSuccess("保存成功！");
                    this.refresh();
                    this.quizModalVisible = false;
                  } else {
                    this.msgError(message || "保存失败！");
                  }
                })
                .finally(() => {
                  this.quizLoading = false;
                });
            }
          });
        },
        onPageChange({ currentPage, pageSize }) {
          this.query.pageSize = pageSize;
          let params = {
            start: (currentPage - 1) * pageSize,
            length: pageSize
          };
          if (params.start.isNaN) {
            params.stats = 0;
          }
          this.fetchData(params);
        },
        onToAppReply(problemId) {
          window.open(
            "/eip/marketApp/marketAppReply/list?problemId=" + problemId
          );
        }
      }
    };
  }
}
</script>


<style scoped lang="scss">
.app-content {
  border: 1px solid #d9d9d9;
  margin-bottom: 20px;
  margin-top: 40px;
  padding-left: 20px;
  border-radius: 5px;
  position: relative;
  margin-right: 40px;
}
.title-content {
  margin-top: 10px;
  font-size: 20px;
  color: #595a78;
  cursor: pointer;
  padding-left: 80px;
}
.time-content {
  margin-top: 10px;
  padding-left: 80px;
}
.describe-content{
  color: rgb(73, 80, 96);
  padding-left: 80px;
}
.avatar {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 20px;
}
img {
  border-radius: 5px;
}
</style>

